<script lang="ts" setup name="Custom">
  import lang from './lang';
  import { addCustom, delCustom, pageCustom, updateCustom, exportCustom } from '@/api/base/custom';
  import { useMixins } from '@/hooks/useMixins';

  const { loadLangFn, getDictDataListFn } = useMixins();

  const dfPageListRef: any = ref(null);

  loadLangFn(lang);

  const customTypeList = ref([]);

  const pageOptions = {
    searchForm: {
      formSchemas: [
        {
          label: 'customName',
          component: 'NInput',
        },
        {
          label: 'customCode',
          component: 'NInput',
        },
      ],
    },
    table: {
      hasSelection: true,
      columns: [
        {
          width: 120,
          label: 'customName',
        },
        {
          width: 120,
          label: 'customCode',
        },
        {
          width: 120,
          label: 'customShort',
        },
        {
          width: 120,
          label: 'contacts',
        },
        {
          width: 120,
          label: 'contactsTel',
        },
        {
          width: 120,
          label: 'customTypeName',
        },
        {
          width: 120,
          label: 'salesman',
        },
        {
          width: 120,
          label: 'customHobby',
        },
        {
          width: 150,
          label: 'customAddress',
        },
        {
          width: 200,
          label: 'remark',
          common: true,
        },
      ],
      action: {
        columns: [
          {
            label: 'edit',
          },
          {
            label: 'delete',
          },
        ],
      },
      operaColumn: [
        {
          label: 'add',
        },
        {
          label: 'export',
        },
      ],
      requestFn: pageCustom,
      delRequestFn: delCustom,
      exportRequestFn: exportCustom,
    },
    modalFormDialog: {
      formSchemas: [
        {
          label: 'customName',
          required: true,
        },
        {
          label: 'customCode',
          editDialogDisabled: true,
          required: true,
        },
        {
          label: 'customShort',
          required: true,
        },
        {
          label: 'contacts',
        },
        {
          label: 'contactsTel',
        },
        {
          label: 'customTypeName',
          prop: 'customTypeId',
          checkProp: 'customTypeName',
          component: 'NSelect',
          options: customTypeList,
        },
        {
          label: 'salesman',
        },
        {
          label: 'customHobby',
        },
        {
          label: 'customAddress',
          giProps: { span: 4 },
          span: 3,
        },
        {
          label: 'remark',
          common: true,
          type: 'textarea',
          giProps: { span: 4 },
          span: 3,
        },
      ],
      cols: 2,
      addDataFn: addCustom,
      updateDataFn: updateCustom,
    },
  };

  async function initDictData() {
    const res = await Promise.all([getDictDataListFn('customer_type')]);
    const [list1] = res;
    customTypeList.value = list1;
  }

  initDictData();

  // nextTick(() => {
  //   dfPageListRef.value && dfPageListRef.value.openModalFn();
  // });
</script>

<template>
  <div class="paramConfig">
    <DFPageList ref="dfPageListRef" :page-options="pageOptions" />
  </div>
</template>
